<template>
  <div class="new">
    <!-- 背景动态滚动图组件 -->
    <NewScroll class="scr" />
    <div class="low">
      <div class="left">NEWS</div>
      <div class="right">
        <div class="msg" v-for="(item, index) in news" :key="index">
          <span class="time">{{ item.time }}</span>
          <span class="text">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <div class="ji">
      <img class="bgImg2" src="../assets/images/img10_1_pc.png" alt="" />
      <img class="tree" src="../assets/images/img01_4_pc.png" alt="" />
      <img class="bJ animate__animated animate__bounceIn" src="../assets/images/img05_1.png" alt="" />
      <img class="sj animate__animated animate__bounceIn" src="../assets/images/img05_2.png" alt="" />
    </div>
  </div>
</template>

<script>
const NewScroll = () => import("./scroll/NewScroll.vue");
export default {
  data() {
    return {
      news: [
        {
          time: "2020.12.25",
          text: "更新“去开拓吧”、“来经营牧场吧”、“去小镇吧”、“来分享吧”页面内容！",
        },
        { time: "2020.10.29", text: "官方网站开放！" },
      ],
    };
  },
  components: {
    NewScroll,
  },
};
</script>

<style lang="less" scoped>
.low {
  position: relative;
  width: 100%;
  height: 100%;
}
.new {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 258px;
  .scr {
    position: absolute;
    top: 0;
    left: 0;
  }
  .left {
    z-index: 150;
    margin-top: 50px;
    float: left;
    width: 25%;
    height: 100%;
    font-size: 50px;
    font-weight: 800;
    @media screen and (max-width: 420px) {
      font-weight: 700;
      font-size: 20px;
      margin-top: 50px;
      margin-left: 20px;
      font-size: 40px;
    }
  }
  .right {
    z-index: 150;
    margin-top: 50px;
    float: left;
    width: 55%;
    height: 100%;
    @media screen and (max-width: 420px) {
      margin-top: 0px;
      width: 80%;
      margin-left: 20px;
    }
    .msg {
      padding: 13px;
      background-color: rgb(212, 244, 205);
      margin-top: 20px;
      text-align: left;
      width: 100%;
      border-radius: 20px;
      font-size: 16px;
      .time {
        text-align: center;
        margin-right: 25px;
        width: 30%;
      }
      .text {
        text-align: left;
        width: 60%;
      }
    }
  }
  .ji {
    z-index: 100;
    position: absolute;
    top: 40px;
    right: -600px;
    .bgImg2 {
      z-index: 100;
      width: 40%;
      height: 40%;
      @media screen and (max-width: 420px) {
        display: none;
      }
    }
    .tree {
      position: absolute;
      left: 300px;
      top: -120px;
      @media screen and (max-width: 420px) {
        width: 300px;
        left: 0;
        bottom: 0;
      }
    }
    .bJ {
      position: absolute;
      left: 450px;
      top: 150px;
      @media screen and (max-width: 420px) {
        left: 0;
        top: 0;
      }
      animation: jump1 1.2s infinite linear;
    }
    .sj {
      position: absolute;
      left: 450px;
      top: 150px;
      animation: jump2 1s infinite linear;
    }
    @keyframes jump1 {
      20% {
        top: 140px;
      }
      40% {
        top: 150px;
      }
      60% {
        top: 140px;
      }
      80% {
        top: 150px;
      }
    }
    @keyframes jump2 {
      20% {
        top: 140px;
      }
      40% {
        top: 150px;
      }
      60% {
        top: 140px;
      }
      80% {
        top: 150px;
      }
    }
  }
}
</style>>